#{extends 'main.html' /}
#{set title:'CoolSoft - Projects' /}
    <script type="text/javascript">
        function showList(){
			var change = document.getElementById("selectCheckBox").checked;
			var d = document.getElementById("selectionDiv");
			var x = document.getElementById("selectionSubmit");
			var s = document.getElementById("roleSelect");
			if(change==false)
			{
				d.setAttribute("style", "");
				d.removeAttribute("disabled");
				s.removeAttribute("disabled");
			}
			else{
				d.setAttribute("style", "opacity:0.5");	
				d.setAttribute("disabled", "true");
				s.setAttribute("disabled", "true");
			}
		}
			</script>
			
	#{if flash.success}
            <div id = "content">
                <script>
                    javascript: showDialog('Success', '${flash.success}', 'success');
                </script>
            </div>
            #{/if}
            #{if flash.error}
            <div id = "content">
                <script>
                    javascript: showDialog('Error', '${flash.error}', 'error');
                </script>
            </div>
             #{/if}
<div>
<h3>
<form>
	<input id="selectCheckBox" type="checkbox"   onclick ="showList()">
</form>
&nbsp;&nbsp; Would you like to select a specific role for the Guest?
</h3>
</div>


#{form @Users.invitationToGuest()}
	<h4 >Select Roles:</h4>

			<div  id="selectionDiv" style="opacity:0.5" disabled="true" name="secondDiv">
			<select id="roleSelect"  name="selection" disabled="true" >
			  #{list items:roles, as:'role'}
				<option name="${role.id}" value="${role.id}">${role.title}</option>
			  #{/list} 
			   </select>
			 </div>
	<br></br>
	<br></br>
	
<h4>Enter Guest's Email:</h4>
			<input class="validate[required,custom[email]]" type="text" name="email" value="${flash.email}" id = "email"></input>

<br></br>
<br></br>

<input type="hidden" name="projectId" value="${project.getEntityId()}"></input>

<input id="selectionSubmit"  type="submit" value="Invite">

#{/form}
	
